<template>
	<view class="myCustomer">
		<navBar isBack backColor="#fff" title="我的客户" color="#fff" background="transparent"></navBar>
		<view class="mC_topImg">
			<image src="https://manager.ryz1620.com/static/distri/makerCenter/bg.png" mode=""></image>
		
			<!-- 当前比率 -->
			<view class="mC_nowRatio">
				{{total}}人
				<view class="mC_nowRatioItem">
					<image src="https://manager.ryz1620.com/static/distri/fenxiao/makerEli2.png" mode=""></image>
					我的客户
				</view>
			</view>
		</view>
		
		
		<!-- 客户状态按钮 -->
		<view class="mC_changAllBtn" :style="'margin-top:'+navHeight+'rpx;'">
			<view class="mC_changBtnLeft" :class="changeRatio?'mC_btnActive':''" @click="toChangeRatio">
				<image v-if="changeRatio" src="https://manager.ryz1620.com/static/distri/fenxiao/statusOk.png" mode=""></image>
				<image v-else src="https://manager.ryz1620.com/static/distri/fenxiao/statusOk2.png" mode=""></image>
				状态正常
			</view>
			<view class="mC_changBtnRight" :class="changeRatio?'':'mC_btnActive'" @click="toChangeRecord">
				<image v-if="changeRatio" src="https://manager.ryz1620.com/static/distri/fenxiao/over2.png" mode=""></image>
				<image v-else src="https://manager.ryz1620.com/static/distri/fenxiao/over.png" mode=""></image>
				已过期
			</view>
		</view>
		
		<!-- 我的正常客户列表 -->
		<scroll-view scroll-y="true" class="mC_customerList" v-if="changeRatio">
			<view class="mC_customerItem" v-for="(item,index) in customerList" :key='index'>
				<view class="mC_itemUser">
					<view class="mC_userImg">
						<image :src="item.headimg" mode=""></image>
					</view>
					<view class="mC_userName">
						<span>{{item.nickname}}</span>
						到期时间：{{item.over_time}}
					</view>
				</view>
				<view class="mC_itemRight">
					剩余{{item.lastTime}}天
				</view>
			</view>
		</scroll-view>
		
		<!-- 我的过期客户列表 -->
		<scroll-view scroll-y="true" class="mC_customerList" v-else>
			<view class="mC_customerItem" v-for="(item,index) in customerList" :key='index'>
				<view class="mC_itemUser">
					<view class="mC_userImg">
						<image :src="item.headimg" mode=""></image>
					</view>
					<view class="mC_userName">
						<span>{{item.userName}}</span>
						到期时间：{{item.over_time}}
					</view>
				</view>
				<view class="mC_itemRight mC_itemRight_no">
					已过期
				</view>
			</view>
		</scroll-view>
		
	</view>
</template>

<script>
	import navBar from '@/components/navBar/navBar.vue';
	import service_distri from '@/service/distri.js';
	export default{
		data(){
			return{
				changeRatio:true, //切换正常或过期
				customerList:[],
				total:0,
				page:1,
				pagesize:10,
				navHeight:200,
			}
		},
		onLoad(options) {
			this.navHeight = 470 - Number(this.$store.state.system.navBarHeight)*2
			this.getUserList()
		},
		methods:{
			// 获取用户列表
			getUserList(){
				let status = this.changeRatio?1:0;
				service_distri.get_userList({status,page:this.page,pagesize:this.pagesize}).then(res=>{
					if(res.code == 1){
						res.data.list.map(item=>{
							item.lastTime = this.$utils.getDaysAndHours(item.over_time*1000)
							item.over_time = this.$utils.getFormatDate(item.over_time*1000,'yyyy-MM-dd hh:mm')
						})
						this.total = res.data.total
						this.customerList = res.data.list?res.data.list:[]
					}
				})
			},
			
			//点击到状态正常
			toChangeRatio(){
				this.changeRatio = true
				this.getUserList()
			},
			
			//点击到已过期
			toChangeRecord(){
				this.changeRatio = false
				this.getUserList()
			}
			
		},
		components:{
			navBar
		},
	}
</script>

<style lang="scss" scoped>
	.myCustomer{
		padding-bottom: constant(safe-area-inset-bottom);///兼容 IOS<11.2/
		padding-bottom: env(safe-area-inset-bottom);///兼容 IOS>11.2/
		.mC_topImg{width: 100%;height: 430rpx;position: absolute;top: 0;left: 0;z-index: 0;image{width: 100%;height: 100%;}}
		
		// 当前比率
		.mC_nowRatio{
			width: 100%;
			position: absolute;
			z-index: 2;
			bottom: 60rpx;
			left: 0;
			padding-left: 28rpx;
			// margin: 78rpx 0 0 32rpx;
			font: 500 60rpx/52rpx PingFang SC;
			color: #fff;
			.mC_nowRatioItem{
				margin-top: 20rpx;
				display: flex;
				font: 500 30rpx/40rpx PingFang SC;
				image{
					width: 40rpx;
					height: 40rpx;
					margin-right: 16rpx;
				}
			}
		}
		
		// 客户状态按钮
		.mC_changAllBtn{
			position: relative;
			width: 702rpx;
			height: 72rpx;
			margin: 0 auto ;
			background-color: #fff;
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			font: 500 30rpx/40rpx PingFang SC;
			image{width: 28rpx;height: 28rpx;margin:0 16rpx 0 96rpx;}
			.mC_changBtnLeft{
				display: flex;
				align-items: center;
				width: 50%;
				height: 100%;
				border-radius: 16rpx 0 0 16rpx;
				border: 2rpx solid #DBA954;
				color: #DBA954;
			}
			.mC_changBtnRight{
				display: flex;
				align-items: center;
				width: 50%;
				height: 100%;
				border-radius: 0 16rpx 16rpx 0;
				border: 2rpx solid #DBA954;
				color: #DBA954;
			}
			.mC_btnActive{
				background-color: #DBA954;
				border: 0;
				color: #fff;
			}
		}
		
		//我的客户列表
		.mC_customerList{
			width: 702rpx;
			// height: 946rpx;
			margin: 40rpx auto 140rpx;
			background-color: #fff;
			border-radius: 16rpx;
			padding: 10rpx 24rpx 10rpx 24rpx;
			.mC_customerItem{
				padding: 30rpx 0 28rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 2rpx solid #F4F4F4;
				.mC_itemUser{
					display: flex;
					align-items: center;
					.mC_userImg{
						width: 96rpx;
						height: 96rpx;
						margin-right: 24rpx;
						image:{width: 96rpx;height: 96rpx;}
					}
					.mC_userName{
						display: flex;
						flex-direction: column;
						font: 400 22rpx/36rpx PingFang SC;
						color: #A0A0A0;
						span{font: 600 26rpx/40rpx PingFang SC;color: #0A0605;margin-bottom: 12rpx;}
					}
				}
				.mC_itemRight{
					width: 160rpx;
					height: 88rpx;
					background-color: #F8F8F8;
					border-radius: 4rpx;
					font: 600 24rpx/88rpx PingFang SC;
					color: #FA4E37;
					text-align: center;
				}
				.mC_itemRight_no{
					color: #A0A0A0;
				}
			}
		}
		
	}
</style>
